<!-- 金融中心 金融产品管理 -->
<template>
  <div class>
    <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">
      <el-form-item prop="fundSideId" label="资金方：">
        <el-select v-model.trim="searchForm.fundSideId" placeholder="请选择成交状态">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="(item,index) in partyFundsOptions"
            :key="index"
            :label="item.fundSideName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="productType" label="产品类型：">
        <el-select v-model.trim="searchForm.productType" placeholder="请选择产品类型">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="(item,index) in typeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList(1)" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="()=>{time=[];$refs.searchForm.resetFields()}">重置</el-button>
      </el-form-item>
    </el-form>
    <p class="f-txr">
      <el-button size="small" type="primary" @click="addList">新增</el-button>
    </p>

    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableFormatter="tableFormatter"
      :hasSera="true"
      :activeBtn="activeBtn"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
    <addModal
      :visible.sync="lineVisible"
      :type="lineType"
      @onSave="formSave"
      :editform="editform"
      :partyFunds="partyFundsOptions"
    />
  </div>
</template>
<script>
import api from "@/api/apiPath";
import tableList from "@/components/common/tableList";
import utils from "@/common/utils";
import addModal from "./listModal";
export default {
  name: "financialProductManage",
  title: "金融产品管理",
  components: {
    "table-list": tableList,
    addModal
  },
  data() {
    return {
      searchForm: {
        fundSideId: "",
        productType: ""
      },
      lineVisible: false,
      lineType: "add",
      editform: {},
      productType: {
        1: "佣金垫付"
      },
      partyFundsOptions: [],
      typeOptions: [{ label: "佣金垫付", value: 1 }],
      tableInfos: [
        { label: "产品类型", prop: "productType" },
        { label: "授信额度(元)", prop: "lineofCredit", type: "money" },
        { label: "资金方", prop: "fundSideName" },
        { label: "成本风控(%)", prop: "cost", type: "num" },
        { label: "可用周期(天)", prop: "used", type: "num" },
        {
          label: "已拆解资金(元)",
          prop: "dismantledCapital",
          type: "money",
          fn: this.toUsed
        },
        { label: "可使用资金(元)", prop: "availableCapital", type: "money" },
        { label: "操作人", prop: "operatorName" },
        { label: "操作时间", prop: "updateTime", type: "time" },
        {
          label: "操作",
          prop: "changeBtn",
          fn: [
            { label: "编辑", fn: this.editList, type: "edit" },
            { label: "删除", fn: this.deleteList, type: "delete" }
          ]
        }
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0
    };
  },
  methods: {
    defultSearch() {
      let { params } = this.$route;
      if (params && params.type == "search") {
        for (let key in params.value) {
          let val = params.value[key];
          this.searchForm[key] = val;
        }
      }
    },
    //格式化操作按钮
    activeBtn(row, prop, btns) {
      btns = btns.map(btn => {
        if (btn.type == "delete") {
          btn.disabled = !!row.dismantledCapital;
        }
        return btn;
      });

      return btns;
    },
    formSave(type, form) {
      let { name, userId } = JSON.parse(window.localStorage.cmsUser);
      let params = {
        ...form,
        operatorId: userId,
        operatorName: name
      };
      let url = "/financialCenter/financeProduct/save";
      if (type == "edit" && form.dismantledCapital !== 0) {
        url = "/financialCenter/financeProduct/updateAmount";
      }
      this.$axios.post(url, params).then(res => {
        this.lineVisible = false;
        //编辑成功，更新列表和资金方额度
        this.searchList();
        this.loadPartyFunds();
        this.$message({
          message: type == "add" ? "添加成功" : "编辑成功",
          type: "success"
        });
      });
    },
    toUsed(row) {
      this.$router.push({
        name: "financialProduct",
        params: {
          type: "search",
          value: {
            financialProductId: row.id
          }
        }
      });
    },
    deleteList(row) {
      this.$axios
        .get(`/financialCenter/financeProduct/delete/${row.id}`)
        .then(res => {
          this.searchList();
          this.$message({
            message: "删除成功",
            type: "success"
          });
        });
    },
    editList(row, prop) {
      this.lineType = "edit";
      this.editform = { ...row };
      this.lineVisible = true;
    },
    addList() {
      this.lineType = "add";
      this.lineVisible = true;
    },
    //加载资金方
    loadPartyFunds() {
      this.$axios
        .get("/financialCenter/financeProduct/fundSideList")
        .then(res => {
          this.partyFundsOptions = res;
        });
    },
    searchList(pageNum) {
      this.defultSearch();
      this.pageNum = pageNum || this.pageNum;
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchForm
      };
      this.$axios
        .post("/financialCenter/financeProduct/list", param)
        .then(res => {
          this.tableData = res.list.map(list => {
            list.cost = `${list.beginCostControl} - ${list.endCostControl}`;
            list.used = `${list.beginCycle} - ${list.endCycle}`;
            list.fundSideName = [];
            //合并资金方字字段
            list.productInfos.forEach(info => {
              list.fundSideName.push(
                `${info.fundSideName}：${utils.formatMoney(info.sharedQuota)}`
              );
            });
            list.fundSideName = list.fundSideName.join("\n");
            return list;
          });
          this.totalSize = res.total;
        });
    },
    //表格格式化方法。prop对应array下标
    tableFormatter(prop, val) {
      if (prop == "productType") {
        return this.productType[val];
      }
      return val;
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    }
  },
  created() {
    this.searchList(1);
    this.loadPartyFunds();
  },
  activated() {
    this.searchList();
  },
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus" scoped>
.title {
  font-weight: 400;
  color: #1f2f3d;
  font-size: 17px;
}

.flex {
  display: flex;
  align-items: center;
}

.flex-item {
  flex: 1;
}

.f-txr {
  text-align: right;
}

.row-item {
  line-height: 32px;
  text-align: center;

  div {
    &:nth-child(1) {
      color: #666;
      font-size: 14px;
    }
  }
}
</style>
